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The Problem 


* Our website sends a lot of email 

* Spiky, time-sensitive workloads 

* We use a mail delivery service (Postmark), but their 
templating support is not good enough 

* Our servers have to render every email for every 
recipient, and pass them to Postmark one at a time 

* Heavy load on the server 


The Solution 



AWS Lambda 


Why React? 


* Familiar technology (already using it at Impraise) 

* Familiar use-case (rendering HTML from data) 

* Access to the vast NPM ecosystem 

* Because we can 


Introducing 



github.com/imp raise/react-mailmerge 



3 files in the mail merge process 
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How does it work? 


* One Lambda function per email template 

* Invoke MailMerge with structured data 

* MailMerge does robust data validation 

* Renders one or many email templates, HTML & text 

* Passes the results to your mail delivery service 

* Returns / logs errors from mail delivery service 


github.com/impraise/react-mailmerge 


Extra Benefits 


* Storybook for mail preview 

* Fixing email copy is easy 

* JSON Schema as documentation 

* Localization & internationalization 

* Continuous deployment via Cl 


github.com/impraise/react-mailmerge 


Storybook Preview 



4r C i Secure | https://impraise.github.io/react-mailmerge/?knob-baseUrl=example-website.com&knob-user%20name=Frodo%... ☆ 



KNOBS 

basellrl example-website.com 

user name Frodo Baggins 

token secondbreakfast 

invitedBy Gandalf 
name 

group name Fellowship of the Ring 




Hey, Frodo Baggins! 

Gandalf has invited you to join the Fellowship of the Ring group on 

Example Website! 

Example Website is the best place to frobnicate all your whatsits, and it's 
free! We'd love to get you on board! 


Accept your invitation 


Example Website © 2018 


RESET 


storybook.js.org -> impraise.github.io/react-mailmerge 














Easy Copy Edits 

<Box cellPadding={5}> 

<Item>{greeting}</Item> 

<Item> 

{invitedBy .name} has invited you to join the <b>{group. name}</b>{" "} 
group on{" "} 

<A href={url} color={linkColor} textDecoration="none"> 

{site. name}! 

</A> 

</Item> 

<Item> 

<b>{site.name}</b> is the best place to frobnicate all your 
whatsits, and it&apos;s free! We&apos;d love to get you on board! 
</Item> 

<CallToAction url={url} text="Accept your invitation" /> 

</Box> 


github.com/impraise/react-mailmerge 




JSON Schema 


{ 

"type": "object", 

"properties": { 

"baseUrl": { 

"description": "Links in the email should point to this base URL", 
"type": "string" 

}, 

"user": { 

"description": "The person receiving this email", 

"type": "object", 

"properties": { 

"name": { 

"type": "string" 

L 

"email": { 

"type": "string" 

h 

"invitationToken" : { 

"type": "string" 

> 

h 

"required": ["email", "invitationToken"] 


j son-schema.org 




Localization 


<FormattedTime 


value=-f eve nt. startAt 
timeZone^user. timeZone j' 
timeZoneName= "S 



12:00 P 



R . Format js 


github.com/yahoo/react-intl 






Continuous Deployment 


APEX 

serverless architecture 

http://apex.run 


Deploy directly from continuous integration server 
Easy to write automated tests for safety 


github.com/impraise/react-mailmerge 


Unexpected Problems 


* Backwards-incompatible changes are painful 

* Discovered data problems (but fixed them!) 

* Still need to gather performance metrics 

* Unexpected timeouts on Lambda 


github.com/impraise/react-mailmerge 



Help Us Out! 


github-com/impraise/react-mailmerge 


Clone the repo and give it a try! 

Use different mail delivery services: Amazon SES? 

We need more / better documentation, and more example 
email templates 

Follow the patterns in the repo, and let us know if they're 
helpful! 


Any Questions? 

github.com/impraise/react-mailmerge 
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